<template>
	<view class="account">
		<view class="info-tit u-p-20 u-m-b-20">请正确输入您的社交媒体账号资料及数据，通过账号认证，可以帮助您更好的接通告。</view>
		
		<view class="u-flex u-m-t-20 u-m-b-20" @click="edit">
			<u-image
				class="image" 
				width="80rpx" 
				height="80rpx" 
				:src="image_url"></u-image>
				<view class="edit u-p-l-30">编辑抖音名片</view>
		</view>
		
		<view class="item">
			<view class="tit u-flex u-row-between">
				<view><text class="xin">*</text>小红书主页链接</view>
				<view class="txt">如何获取链接？</view>
			</view>
			<view class="des u-m-t-20 u-m-b-20">
				打开小红书APP个人主页界面，点击[分享]进行复制主页链接。注意：主页链接修改后将需要重新认证
			</view>
			<view class="u-rela">
				<view class="u-abso copy">
					[点击粘贴链接]
				</view>
				<input class="inp" value="http://www.baidu.com" type="text" placeholder="填写商品名称" />
			</view>
			
		</view>
		<view class="item">
			<view class="tit"><text class="xin">*</text>封面</view>
			<u-upload :action="action" :file-list="fileList" ></u-upload>
			<view class="des u-m-t-20 u-m-b-20">
				自拍产品展示图，用于达人圈封面
			</view>
		</view>
		<view class="item">
			<view class="tit"><text class="xin">*</text>达人领域</view>
			<view class="item-info u-flex u-flex-wrap u-m-t-20">
				<view :class="[index==2?'li action':'li']" v-for="(item,index) in typeList" :key="index">{{item.name}}</view>
			</view>
		</view>
		<view class="item u-flex u-row-between">
			<view class="tit"><text class="xin">*</text>直播带货</view>
			<u-switch v-model="isDefault" @change="switchChange" :size="40" active-color="#de4f38"></u-switch>
		</view>
		<view class="item u-flex u-row-between">
			<view class="tit"><text class="xin">*</text>商品橱窗</view>
			<u-switch v-model="isDefault1" @change="switchChange" :size="40" active-color="#de4f38"></u-switch>
		</view>
		
		
		<view class="item">
			<view class="tit"><text class="xin">*</text>认证截图</view>
			<u-upload :action="action" :file-list="fileList" ></u-upload>
			<view class="des u-m-t-20 u-m-b-20">
				登录抖音APP，截屏个人设置界面，上传以完成账号的认证
			</view>
		</view>
		<view class="accountBtn" @click="send">完成</view>
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				isDefault : false,
				isDefault1 : false,
				image_url: require('@/static/icons/21@2x.png'),
				action: 'http://www.example.com/upload',
				fileList: [
					{
						url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
					}
				],
				id:0,
				typeList:[
					{
						id:1,
						name:'美妆护肤'
					},
					{
						id:2,
						name:'时尚穿搭'
					},
					{
						id:3,
						name:'旅行探店'
					},
					{
						id:4,
						name:'健康养生'
					},
					{
						id:5,
						name:'健身轻食'
					},
					{
						id:5,
						name:'美食'
					},
					{
						id:5,
						name:'影视'
					},
					{
						id:5,
						name:'家居生活'
					}
				],
			}
		},
		methods: {
			switchChange(status) {
				console.log(status);
			},
			send(){
				uni.navigateTo({
					url: '/pages/mine/releaseShop/releaseDes',
				})
			},
			edit(){
				uni.navigateTo({
					url: '/pages/mine/account/editAccount',
				})
			},
		},onLoad(e) {
			
		}
	}
</script>

<style lang="scss" scoped>
.account{
	background-color: #fff;
	padding: 30rpx 30rpx 120rpx;
	.info-tit{
		background-color: #f8dcd7;
		color: #de4f38;
		line-height: 40rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
	}
	.edit{
		font-weight: 600;
		font-size: 34rpx;
		color: #000;
	}
	.item{ 
		margin-bottom: 30rpx;
		.des{ color:#999; line-height: 38rpx; }
		.tit{
			font-size: 32rpx;
			color: #000;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 32rpx;
			.xin{ color:#de4f38;}
			.txt{color:#de4f38;}
		}
		.inp{
			border-bottom: 1px solid #eee;
			height: 80rpx;
			font-size: 32rpx;
		}
		.copy{ height: 80rpx; line-height: 80rpx; color:#999; top:0; right:0; }
		&-info{
			.li{
				text-align: center;
				width: 22%;
				background-color: #f5f5f5;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 60rpx;
				margin-bottom: 30rpx;
				color: #666;
				margin-right: 4%;
				&:nth-child(4n){
					margin-right: 0;
				}
				&.action{
					background-color: #de4f38;
					color: #fff;
				}
			}
		}
	}
	.accountBtn{position: fixed; bottom: 0; left:0; z-index: 999; text-align: center; font-size: 32rpx; color:#fff; width: 100%; height:100rpx; line-height: 100rpx; background-color: #de4f38; }
}
</style>
